@use 'sass:color';
@use './theme' as *;
@use '../share/renderer/mixin' as *;

@each $class in (':root', '.-theme-with-dark-background') {
  #{$class} {
    @if ($class == '.-theme-with-dark-background') {
      color-scheme: dark;
    }
    @include theme-vars(
      (
        color-text,
        color-error-text,
        color-success-text,
        color-warning-text,
        color-info-text,
        color-primary,
        color-primary-hover,
        color-primary-active,
        color-bg-container,
        color-fill,
        color-fill-secondary,
        color-fill-tertiary,
        color-white,
        color-success,
        color-error,
        color-error-bg,
        color-fill-alter,
        box-shadow,
        color-bg-text-hover,
        color-success-hover,
        color-success-active,
        if(
          $class == ':root',
          (
            color-primary-bg: color.adjust($color-primary, $lightness: 40%),
            color-border: color.adjust($color-border, $lightness: 2%),
            color-bg-container-darker:
              color.adjust($color-bg-container, $lightness: -5%),
          ),
          (
            color-primary-bg: color.adjust($color-primary, $lightness: -25%),
            color-border: color.adjust($color-border-dark, $lightness: -8%),
            color-bg-container-darker:
              color.adjust($color-bg-container-dark, $lightness: -5%),
          )
        )
      ),
      if($class == ':root', 'light', 'dark')
    );
  }
}

.panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  background: var(--color-bg-container);
}

.panel-with-toolbar {
  width: 100%;
  height: 100%;
  padding-top: 31px;
  overflow-y: auto;
  position: relative;
}

.panel-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-toolbar {
  background: var(--color-bg-container);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.panel-body {
  height: 100%;
  overflow-y: auto;
}
